<template>
  <li :class="['menu-item',{'active': active}]" @click="handlerClick">
      <slot></slot>
  </li>
</template>
<script>
import Emitter from '../mixins/emitter';
export default {
  name: 'MenuItem',
  mixins: [ Emitter ],
  props: {
    name: [String, Number]
  },
  data() {
    return {
      active: false
    }
  },
  methods: {
   handlerClick() {
      let name = this.name;
      let el = this.$el;
      this.dispatch('Menu', 'on-menu-item-select', {name, el});  
   }
  },
  mounted() {
    this.$on('on-update-active-name', name => {
                if (this.name === name) {
                    this.active = true;
                    let el = this.$el;
                    this.dispatch('Menu', 'on-active-change', el);
                } else {
                    this.active = false;
                }
            });
  }
}
</script>
